<template>
  <!--     @ok="handleOk" -->
  <j-modal
    :title="title"
    :width="1600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
    destroyOnClose
  >
    <div
      v-if="xhdjBackOrderTrendsListVOS && xhdjBackOrderTrendsListVOS.length > 0"
      style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700"
    >
      订单流程
    </div>
    <!-- direction="vertical" -->
    <a-steps progress-dot :current="7" direction="vertical">
      <a-step v-for="(item, index) in xhdjBackOrderTrendsListVOS" :key="index" :title="pailie[item.trendsType]">
        <span slot="description">
          <p>{{ item.createTime }}</p>
          <!-- <img v-if="item.trendsType == 3" width="80" height="80" :src="" /> -->
          <j-image-upload
            v-if="item.trendsType && [4, 5].includes(item.trendsType)"
            text="上传"
            disabled
            v-model="item.imgs"
          ></j-image-upload>
          <p>{{ item.address }}</p>
        </span>
      </a-step>
    </a-steps>
    <div style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700">详细信息</div>
    <div style="display: flex; justify-content: left">
      <table width="80%">
        <tr>
          <td class="td-title">服务技师</td>
          <td class="td-main">{{ user.coachName }}</td>
          <td class="td-title" :rowspan="4">技师照片</td>
          <td class="td-main" :rowspan="4">
            <j-image-upload text="上传" disabled v-model="user.workImg"></j-image-upload>
          </td>
        </tr>
<!--        <tr>-->
<!--          <td class="td-title">用户编号</td>-->
<!--          <td class="td-main">{{ user.userId }}</td>-->
<!--        </tr>-->
        <tr>
          <td class="td-title">客户姓名</td>
          <td class="td-main">
            {{ user.name }}(<span :class="{ 'text-green': user.newSign !== 1, 'text-red': user.newSign === 1 }">{{ user.newSign === 1 ? '新客' : '老客' }}</span>)
          </td>
        </tr>

        <tr>
          <td class="td-title">手机号码</td>
          <td class="td-main">{{ user.phone }}</td>
        </tr>
        <tr>
          <td class="td-title">服务时长</td>
          <td class="td-main">{{ user.timeLong }}分钟</td>
        </tr>
        <tr>
          <td class="td-title">预约时间</td>
          <td class="td-main">{{ user.makeTime }}</td>
        </tr>
        <tr>
          <td class="td-title">订单车费</td>
          <td class="td-main font-red">{{ parseFloat(user.carAmount || 0).toFixed(2) }} 元</td>
          <td class="td-title">合计已支付金额</td>
          <td class="td-main font-red">{{ parseFloat(user.addUpToPayTotal || 0).toFixed(2) }} 元</td>
        </tr>

        <tr v-if="user.outTime">
          <td class="td-title">退款时间</td>
          <td class="td-main">{{ user.outTime }}</td>
          <td class="td-title">退款金额</td>
          <td class="td-main font-red">{{ parseFloat(user.outAmount || 0).toFixed(2) }} 元</td>
        </tr>
        <tr v-if="user.outOrderNo">
          <td class="td-title">退款订单号</td>
          <td class="td-main">{{ user.outOrderNo }}</td>
          <td class="td-title"></td>
          <td class="td-main"></td>
        </tr>
        <tr>
          <td class="td-title">提交时间</td>
          <td class="td-main">{{ user.createTime }}</td>
          <td class="td-title">单程距离</td>
          <td class="td-main">{{ user.distance }}km</td>
        </tr>
        <tr v-if="user.refundReason">
          <td class="td-title">退款原因</td>
          <td class="td-main" colspan="4">{{ user.refundReason }}</td>
        </tr>
        <tr>
          <td class="td-title">服务地址</td>
          <td class="td-main">{{ user.address }}</td>
          <td class="td-title">技师地址</td>
          <td class="td-main">{{ user.coachAddress }}</td>
        </tr>
        <tr>
          <td class="td-title">订单备注</td>
          <td class="td-main" colspan="4">{{ user.remark }}</td>
        </tr>
      </table>
    </div>

    <div style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700">订单信息</div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="orderServerList"
      :pagination="false"
      class="j-table-force-nowrap"
    >
      <template slot="payStatus" slot-scope="text, record">
        <a-tag :color="options[record.payStatus].color" v-if="record.serverName != '合计项目金额'">
          {{ options[record.payStatus].label }}
        </a-tag>
        <a-tag :color="payTypes[record.payType].color" v-if="record.serverName != '合计项目金额'">
          {{ payTypes[record.payType].label }}
        </a-tag>
      </template>
      <template slot="serverName" slot-scope="text, record">
        <div style="display: flex" v-if="record.serverName != '合计项目金额'">
          <div>
            <a-badge
              :count="record.orderType == 0 ? 0 : record.orderType == 1 ? '加钟' : '升级'"
              :showZero="false"
              :offset="[-100, 5]"
            >
              <template slot="count" type="clock-circle" style="color: #f5222d"> 升级 </template>
              <j-image-upload text="上传" disabled v-model="record.cover"></j-image-upload>
            </a-badge>
          </div>
          <div>
            <div style="font-size: 18px; font-weight: 600">{{ record.serverName }}</div>
            <div>服务时长：{{ record.timeLong }}分钟</div>
            <div style="display: flex">
              <div>
                服务金额：<span style="color: red; font-size: 16px">{{
                  parseFloat(record.serviceAmount / record.serverNum || 0).toFixed(2)
                }}</span
                >元
              </div>
              <div style="margin-left: 150px">X {{ record.serverNum }}</div>
            </div>
            <div>支付时间：{{ record.payTime }}</div>
          </div>
        </div>
        <div v-else>合计项目金额</div>
      </template>
    </a-table>

    <div style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700">拨打记录</div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="PhoneColumns"
      :dataSource="PhoneColumnsList"
      :pagination="false"
      class="j-table-force-nowrap"
    >
    </a-table>

    <a-spin :spinning="confirmLoading"> </a-spin>
  </j-modal>
</template>

<script>
import Area from '@/components/_util/Area'
import { getAction, getPhonePrivacyList } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'XhdjCoachInfoDialog',
  data () {
    return {
      xhdjBackOrderTrendsListVOS: [],
      pailie: {
        1: '已接单',
        7: '技师出发',
        2: '已拒绝',
        3: '已到达',
        4: '服务开始',
        5: '服务结束'
      },
      phoneStatus: {
        0: '失败',
        1: '成功'
      },
      callTypeStatus: {
        0: '客户',
        1: '芳疗师'
      },
      title: '操作',
      visible: false,
      model: {},
      addXhdjOrderInfoFrontListVO: [],
      orderServerList: [],
      PhoneColumnsList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      options: [
        { label: '待支付', value: '0', color: 'orange' },
        { label: '已支付', value: '1', color: 'green' },
        { label: '已取消', value: '2', color: '#999' },
        { label: '退款中', value: '3', color: 'orange' },
        { label: '已退款', value: '4', color: 'red' }
      ],
      payTypes: {
        1: { label: '会员余额', value: '1', color: 'orange' },
        2: { label: '支付宝', value: '2', color: 'blue' },
        3: { label: 'APP微信(商户备用)', value: '3', color: 'green' },
        4: { label: '微信公众号(商户备用)', value: '4', color: 'green' },
        5: { label: '微信公众号(商户备用)', value: '5', color: 'blue' },
        6: { label: '微信公众号(商户备用)', value: '6', color: 'blue' },
        7: { label: '微信公众号(商户1674799970)', value: '6', color: 'blue' }
      },

      coachId: '',
      paramsDate: {},
      PhoneColumns: [
        {
          title: '芳疗师号码',
          align: 'center',
          dataIndex: 'phoneOne'
        },
        {
          title: '客户号码',
          align: 'center',
          dataIndex: 'phoneTwo'
        },
        {
          title: '拨打时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '是否拨打成功',
          align: 'center',
          dataIndex: 'status',
          customRender: (text, record) => {
            return this.phoneStatus[record.status]
          }
        },
        {
          title: '绑定虚拟号',
          align: 'center',
          dataIndex: 'bindPhone'
        },
        {
          title: '首次拨号方',
          align: 'center',
          dataIndex: 'callType',
          customRender: (text, record) => {
            return this.callTypeStatus[record.callType]
          }
        },
        {
          title: '绑定失效时间',
          align: 'center',
          dataIndex: 'expriTime'
        }
      ],
      columns: [
        {
          title: '订单ID',
          align: 'center',
          dataIndex: 'orderId'
        },
        {
          title: '项目信息',
          dataIndex: 'serverName',
          scopedSlots: { customRender: 'serverName' }
        },
        {
          title: '合计服务金额（元）',
          align: 'center',
          dataIndex: 'serviceAmount'
        },
        {
          title: '支付信息',
          align: 'center',
          dataIndex: 'payStatus',
          scopedSlots: { customRender: 'payStatus' }
        }
      ],

      confirmLoading: false,
      dataSource: [],
      validatorRules: {},
      user: {},
      url: {
        backQueryByIdDetail: '/order/xhdjAppCoachOrder/backQueryByIdDetail',
        backPhonePrivacyList: '/order/xhdjAppCoachOrder/backPhonePrivacyList'
      }
    }
  },
  created () {
    this.all = new Area().all
    this.allList = this.all.filter(res => res.index == 1)
  },
  methods: {
    add () {
      //初始化默认值
      this.edit({})
    },
    edit (res) {
      var sumOrderAmount = 0
      getAction(this.url.backQueryByIdDetail, { id: res.id }).then(res => {
        if (res.code === 200) {
          this.orderServerList = res.result.detailVOS
          res.result.detailVOS.map(res => {
            sumOrderAmount += res.serviceAmount
          })
          this.orderServerList.push({ serviceAmount: sumOrderAmount, serverName: '合计项目金额' })
        }
      })

      getPhonePrivacyList(this.url.backPhonePrivacyList, { orderNo: res.orderNo }).then(res => {
        if (res.code == 200) {
          console.log('我是拨打数据', res)
          this.PhoneColumnsList = res.result
        }
      })

      this.xhdjBackOrderTrendsListVOS = res.xhdjBackOrderTrendsListVOS
      this.user = res
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },

    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.td-title {
  background-color: rgb(230, 247, 255);
  min-height: 30px;
  text-align: right;
  padding: 7px;
  width: 17%;
}
.td-main {
  min-height: 30px;
  padding: 7px;
  width: 33%;
}
.font-red {
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.text-green {
  color:  red ; /* 老客户绿色 */
}
.text-red {
  color: green; /* 新客户红色 */
}
</style>
